<template>
    <div class="mbi-page">
        <!-- 标题与介绍 -->
        <ToolHeader :title="title" :subtitle="subtitle"/>

        <div class="content-box">
            <!-- 身高输入 -->
            <div class="input-row">
                <span>身高：</span>
                <el-input-number
                        v-model="height"
                        :min="50"
                        :max="250"
                        controls-position="right"
                        class="input-number"
                />
                <span class="unit">cm</span>
            </div>

            <!-- 体重输入 -->
            <div class="input-row">
                <span>体重：</span>
                <el-input-number
                        v-model="weight"
                        :min="20"
                        :max="200"
                        controls-position="right"
                        class="input-number"
                />
                <span class="unit">kg</span>
            </div>

            <!-- 计算按钮 -->
            <div class="button-container">
                <el-button type="primary" size="large" @click="calculateBMI()">计算 BMI</el-button>
            </div>

            <!-- 结果展示 -->
            <div class="result-section">
                <div><strong>BMI：</strong> {{ bmi }}</div>
                <div><strong>结果：</strong> {{ conclusion }}</div>
            </div>

            <!-- 限制提示 -->
            <div class="notice">
                注意：BMI 存在局限性，例如对于肌肉量较大者或老年人可能不准确。
            </div>
        </div>
    </div>
</template>

<script setup>
import {ref, onMounted} from 'vue'
import {get, post} from '@/net/index.js'
import {ElMessage} from 'element-plus'
import ToolHeader from '@/components/ToolHeader.vue'

// 标题和副标题
const title = ref('')
const subtitle = ref('')

// 默认身高体重
const height = ref(170)
const weight = ref(65)

const bmi = ref('——')
const conclusion = ref('——')

// 加载标题介绍
function loadTitleAndSubtitle() {
    get(
        '/api/lifeTool/getInfo?path=BMI',
        (data) => {
            if (data) {
                title.value = data.title || title.value
                subtitle.value = data.introduction || subtitle.value
            }
        },
        (msg) => {
            ElMessage.error('获取工具信息失败：' + msg)
        }
    )
}

function calculateBMI() {
    const payload = {
        height: height.value.toString(),
        weight: weight.value.toString()
    }
    post(
        '/api/lifeTool/getMBIResult',
        payload,
        (data) => {
            bmi.value = data.mbi
            conclusion.value = data.conclusion
        },
        (msg) => {
            ElMessage.error('计算失败' + msg)
        }
    )
}

onMounted(() => {
    loadTitleAndSubtitle()
    calculateBMI()
})
</script>

<style scoped>
.mbi-page {
    width: 100%;
    padding: 1rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.content-box {
    width: 100%;
    max-width: 30rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.input-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
}

.input-number {
    width: 8rem;
}

.unit {
    font-size: 1.1rem;
    color: #666;
}

.button-container {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

.result-section {
    margin-top: 1rem;
    font-size: 1.1rem;
    line-height: 1.6;
}

.notice {
    margin-top: 1rem;
    color: #999;
    font-size: 0.95rem;
    line-height: 1.5;
}
</style>